<!DOCTYPE html>
<html class="no-js">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <script type="text/javascript" src="{{ asset('js/jquery-1.8.3.min.js') }}"></script>
    <!-- 适应移动端end -->
    <title>订单详情</title>

    <link rel="stylesheet" href="{{ asset('myhome/css/common.css') }}">
    <link rel="stylesheet" href="{{ asset('myhome/css/font.css') }}">
    <link rel="stylesheet" href="{{ asset('myhome/css/header.css') }}">
    <link rel="stylesheet" href="{{ asset('myhome/css/footer.css') }}">
    <link rel="stylesheet" href="{{ asset('myhome/css/index.css') }}">
    <link rel="stylesheet" href="{{ asset('myhome/css/responsive.css') }}">
    <link rel="stylesheet" href="{{ asset('css/css_style1.css') }}">
    <link rel="stylesheet" href="{{ asset('css/index.css') }}"/>
    <style>
        .coupon-list li {
            float: left;
            width: 50%;
            text-align: center;
        }

        html {
            background-color: white;
        }
    </style>
</head>
<body>
{{--<!--头部-->{{ url('home/user/order/orderlist/'.$page) }}--}}
<header>
    <div class="header">
        <h1>订单详情</h1>
        <a onclick="javascript:history.go(-1);" class="return"><i></i></a>
    </div>
</header>
<div id="user-b" style="margin-top:55px;">
    <!--html5 nav-->

    <div class="myorder-tab">
        <div class="myorder-nav">
            <ul id="tab_btn" class="coupon-list">
                <li class="pick" id="l1">订单明细</li>
                <li><span class="bar" id="l3" onclick="check()"></span>订单状态</li>
            </ul>
            <div class="cl"></div>
        </div>
        <div class="myorder-content">
            <ul>
                <li class="mc-all cc-one tab_content show">
                    <!--订单编号-->
                    <div class="memberDetailheader line">订单号：{{ $list->number }}</div>

                    <!--收货地址-->
                    <div class="order-Address line select">
                        <dl>
                            <dt><i class="icon-head"></i>{{ $list->name }}&nbsp;&nbsp;<i
                                        class="icon-phone"></i>{{ $list->phone }}</dt>
                            <dd>{{ $list->address }}</dd>
                        </dl>
                    </div>

                    <!--购买商品-->
                    <div class="list-content cartlist order-Pro memberDetaillist" style="margin:0">
                        <ul class="line-li">
                            @foreach($list_info as $v)
                                <li>
                                    <a href="#">
                                        <div class="pro-img"><img src="{{ url('upload/product/'.$v->preview) }}" alt="">
                                        </div>
                                    </a>
                                    <div class="pro-con"><h3>{{ $v->name }}</h3>
                                        <h3>{{ $v->specifications }}</h3><b>￥{{ $v->price }}{{--<s>￥180.90</s>--}}<p
                                                    style="float: right;">&times;{{ $v->count }}</p></b></div>
                                </li>
                            @endforeach
                        </ul>
                    </div>

                    <!--支付方式-->
                    <div class="list list-select" style="margin:0">
                        <ul class="line" style="margin:0">
                            <li>支付方式：
                                @if($list->paymethod == 1)
                                    <font>支付宝支付</font>
                                @endif
                                @if($list->paymethod == 2)
                                    <font>微信支付</font>
                                @endif
                                @if($list->paymethod == 3)
                                    <font>货到付款</font>
                                @endif
                            </li>
                            <li>配送方式：<font>快递物流</font></li>
                        </ul>
                    </div>

                    <!--价格、下单时间-->
                    <div class="memberDetailPrice line">
                        <p>￥{{ $list->amount }} + ￥{{ $list->carriage }}<font>（运费）</font> - ￥{{ $list->discount }}<font>（优惠）</font>
                        </p>
                        <p>应付：￥{{ $list->realpay }}</p>
                        <p>下单时间：{{ $list_time->created_at }}</p>
                    </div>

                    {{--<!--按钮-->--}}
                    {{--<div class="memberDetailFooter line">--}}
                    {{--<button>去支付</button><button>取消订单</button><button>确认收货</button>--}}
                    {{--</div>--}}
                </li>
                <li class="mc-all mc-three tab_content" style="height: 100%">
                    <div class="delivery_box" style=" padding-top: 0.13rem;padding-left: 20px;height: 100%">
                        <ul class="delivery_list" style=" padding-left: 0.5rem;padding-top: 0.2rem">
                            <li class="start" style="background-color: #ededed">
                                <i class="line_icon" style="left: -18px"></i>
                                <div style="">
                                    <p style="font-size: .7rem;float: left;color: rgba(0,0,0,0.79)">订单提交成功</p>
                                    <p style="font-size: 0.6rem;float: right;">{{ substr($list->created_at,0,strlen($list->created_at)-3) }}</p>
                                    <p style="font-size: 0.6rem;clear: both;">订单编号：{{  $list->number }}</p>
                                </div>
                            </li>
                            @if($list->state>=1)
                            <li class="start bg_1" style="background-color: #ededed">
                                <i class="line_icon" style="left: -18px"></i>
                                <div style="">
                                    <p class="col_1" style="font-size: .7rem;float: left;color: rgba(0,0,0,0.79)">待付款</p>
                                    <p class="col_1" style="font-size: 0.6rem;float: right;">{{ substr($list->created_at,0,strlen($list->created_at)-3) }}</p>
                                    <p class="col_1" style="font-size: 0.6rem;clear: both;">您的订单已经提交成功，请尽快完成付款</p>
                                </div>
                            </li>
                            @endif
                            @if($list->state>=2 && $list->status!=6)
                                <li class="start bg_2" style="background-color: #ededed">
                                    <i class="line_icon" style="left: -18px"></i>
                                    <div style="">
                                        <p class="col_2" style="font-size: .7rem;float: left;color: rgba(0,0,0,0.79)">药师审核中</p>
                                        <p class="col_2" style="font-size: 0.6rem;float: right;">{{ substr($list_time->pay_at,0,strlen($list_time->pay_at)-3) }}</p>
                                        <p class="col_2" style="font-size: 0.6rem;clear: both;">执业药师正在进行药品审核，为了您的健康请您耐心等待</p>
                                    </div>
                                </li>
                            @endif
                            @if($list->state>=3 && $list->status!=6)
                                <li class="start bg_3" style="background-color: #ededed">
                                    <i class="line_icon" style="left: -18px"></i>
                                    <div style="">
                                        <p class="col_3" style="font-size: .7rem;float: left;color: rgba(0,0,0,0.79)">药店配货中</p>
                                        <p class="col_3" style="font-size: 0.6rem;float: right;">{{ substr($list_time->doctor_at,0,strlen($list_time->doctor_at)-3) }}</p>
                                        <p class="col_3" style="font-size: 0.6rem;clear: both;">正在为您准备商品</p>
                                    </div>
                                </li>
                            @endif
                            @if($list->state>=4 && $list->status!=6)
                                <li class="start bg_4" style="background-color: #ededed">
                                    <i class="line_icon" style="left: -18px"></i>
                                    <div style="">
                                        <p class="col_4" style="font-size: .7rem;float: left;color: rgba(0,0,0,0.79)">药店配送中</p>
                                        <p class="col_4" style="font-size: 0.6rem;float: right;">{{ substr($list_time->store_at,0,strlen($list_time->store_at)-3) }}</p>
                                        <p class="col_4" style="font-size: 0.6rem;clear: both;">
                                            您的商品正在路上配送小哥联系电话：<a style="color: #0000cc" href="tel:{{  $phone->phone }} ">{{  $phone->phone }}</a></p>
                                    </div>
                                </li>
                            @endif
                            @if($list->status==6 )
                                <li class="start bg_6" style="background-color: #ededed">
                                    <i class="line_icon" style="left: -18px"></i>
                                    <div style="">
                                        <p class="col_6" style="font-size: .7rem;float: left;color: rgba(0,0,0,0.79)">订单已取消</p>
                                        <p class="col_6" style="font-size: 0.6rem;float: right;">{{ substr($list->updated_at,0,strlen($list->updated_at)-3) }}</p>
                                        <p class="col_6" style="font-size: 0.6rem;clear: both;">很遗憾未能向您提供更好的服务，有任何问题可与我们联系</p>
                                    </div>
                                </li>
                            @endif
                            @if($list->state>=5 && $list->status!=6)
                                <li class="start bg_5" style="background-color: #ededed">
                                    <i class="line_icon" style="left: -18px"></i>
                                    <div style="">
                                        <p class="col_5" style="font-size: .7rem;float: left;color: rgba(0,0,0,0.79)">订单已签收</p>
                                        <p class="col_5" style="font-size: 0.6rem;float: right;">{{ substr($list_time->complete_at,0,strlen($list_time->complete_at)-3) }}</p>
                                        <p class="col_5" style="font-size: 0.6rem;clear: both;">期待再次为您服务,祝您健康</p>
                                    </div>
                                </li>
                            @endif

                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!--footer begin-->

    <!--footer end-->
</div>
<script type="text/javascript">
    var mytime = 0;

    var tab_Btns_box = document.getElementById('tab_btn');
    var tab_Btns = tab_Btns_box.getElementsByTagName('li');
    var tab_contents = document.getElementsByClassName('tab_content');
    var pdl = "";
    for (var i = 0; i < tab_Btns.length; i++) {
        tab_Btns[i].index = i;
        tab_Btns[i].onclick = function () {
            for (var i = 0; i < tab_Btns.length; i++) {
                if (i !== this.index) {
                    tab_Btns[i].classList.remove('pick')
                }
            }
            tab_Btns[this.index].className = "pick";
            for (var j = 0; j < tab_contents.length; j++) {
                if (j !== this.index) {
                    tab_contents[j].classList.remove('show');
                } else {
                    pdl = j; //记录第几个选项卡被选中
                }
                tab_contents[this.index].classList.add('show');
            }
        }
    }
    if("{{ $list->status }}"!=6){
        var bg=".bg_"+"{{ $list->state }}";
        var col=".col_"+"{{ $list->state }}";
        $(bg).css('background-color',"#e94343");
        $(col).css('color',"#ffffff");
    }else{
        $(".bg_6").css('background-color',"#e94343");
        $(".col_6").css('color',"#ffffff");
    }


</script>
</body>
</html>